<template>
    <el-card class="space-card" :class="statusClass">
      <template #header>
        <div class="card-header">
          <h3 @click="showDetail">{{ space.spaceName }}</h3>
          <el-tag :type="statusType">{{ space.status }}</el-tag>
        </div>
      </template>
  
      <div class="card-content">
        <p>租赁编号: {{ space.contractNumber }}</p>
        <p>租期: {{ formatDate(space.startDate) }} - {{ formatDate(space.endDate) }}</p>
        <p>月租金: ¥{{ space.rentAmount }}</p>
      </div>
    </el-card>
  </template>
  
  <script setup lang="ts">
  import { Space } from '@/types/space'
  
  const props = defineProps<{
    space: Space
  }>()
  
  const statusClass = computed(() => ({
    'vacant': props.space.status === 'VACANT',
    'occupied': props.space.status === 'OCCUPIED'
  }))
  
  const statusType = computed(() => 
    props.space.status === 'VACANT' ? 'success' : 'warning'
  )
  
  const emit = defineEmits(['show-detail'])
  
  const showDetail = () => {
    emit('show-detail', props.space)
  }
  
  const formatDate = (dateStr: string) => {
    return new Date(dateStr).toLocaleDateString()
  }
  </script>